<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @cancel="handleCancel"
    :footer="null">

    <a-row :gutter="10">
      <a-col :span="6">
        <a-card title="用户基本信息" :bodyStyle="bodyStyle">
          <a-form :form="form">
            <a-col :span="colSpan">
              <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="请输入账号" v-decorator.trim="[ 'username']" :readOnly="!!model.userId" :disabled="disableSubmit"/>
              </a-form-item>
            </a-col>
            <a-col :span="colSpan">
              <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="请输入姓名" v-decorator.trim="[ 'realname']" :disabled="disableSubmit"/>
              </a-form-item>
            </a-col>
            <a-col :span="colSpan">
              <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="请输入手机号码" v-decorator="[ 'phone']" :disabled="disableSubmit" />
              </a-form-item>
            </a-col>
            <a-col :span="colSpan">
              <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag placeholder="请选择性别" :triggerChange="true" v-decorator="['sex']" dictCode="sex" :disabled="disableSubmit"></j-dict-select-tag>
              </a-form-item>
            </a-col>
            <a-col :span="colSpan">
              <a-form-item label="座机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="请输入座机号" v-decorator="[ 'telephone']" :disabled="disableSubmit" />
              </a-form-item>
            </a-col>
            <a-col :span="colSpan">
              <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="请输入邮箱" v-decorator="[ 'email']" :disabled="disableSubmit" />
              </a-form-item>
            </a-col>
            <a-col :span="colSpan">
              <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  style="width: 100%"
                  placeholder="请选择生日"
                  v-decorator="['birthday']"
                  :getCalendarContainer="node => node.parentNode"/>
              </a-form-item>
            </a-col>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="18">
        <a-card title="关联组织">
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">

          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </j-modal>
</template>

<script>
  import JDictSelectTag from '@comp/dict/JDictSelectTag'
  import pick from 'lodash.pick';
  import { JeecgListMixin } from '@/mixins/JeecgListMixin';
  import { api } from '../service';

  export default {
    name: 'UserTenantModal',
    mixins: [JeecgListMixin],
    components: {
      JDictSelectTag
    },
    data () {
      let that = this;
      return {
        disableMixinCreated: true,
        drawerWidth: 700,
        width: 1400,
        visible: false,
        title: '操作',
        tenantId: '',
        userId: '',
        columns: [
          {
            title: '#',
            align: 'center',
            width: 60,
            dataIndex: 'rowIndex',
            customRender: function (t, r, index) {
              return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
            }
          },
          {
            title: '组织名称',
            ellipsis: true,
            dataIndex: 'tenantName'
          }, {
            title: '角色',
            dataIndex: 'roleNames',
            ellipsis: true,
            customRender: function(text) {
              return text ? text.replaceAll(',', '，') : '';
            }
          }, {
            title: '部门',
            dataIndex: 'departNames',
            ellipsis: true,
            customRender: function(text) {
              return text ? text.replaceAll(',', '，') : '';
            }
          }, {
            title: '负责部门',
            dataIndex: 'departIdsName',
            ellipsis: true,
            customRender: function(text) {
              return text ? text.replaceAll(',', '，') : '';
            }
          }, {
            title: '工号',
            dataIndex: 'workNo'
          }, {
            title: '职务',
            dataIndex: 'postName'
          }, {
            title: '是否超管',
            align: 'center',
            dataIndex: 'userIdentity',
            customRender: function(text) {
              if (text === 1) {
                return '是';
              } else {
                return '否';
              }
            }
          }
        ],
        disableSubmit: false,

        form: this.$form.createForm(this),

        model: {},

        colSpan: 24,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        bodyStyle: { 'min-height': '500px' },
        confirmDirty: false,

        url: {
          list: api.listUserTenant(this.tenantId, this.userId),
          delete: ''
        }
      }
    },
    created () {
    },
    computed: {
    },
    watch: {
      tenantId() {
        this.url.list = api.listUserTenant(this.tenantId, this.userId);
      },
      userId() {
        this.url.list = api.listUserTenant(this.tenantId, this.userId);
      }
    },
    methods: {
      edit (record, tenantId) {
        let that = this;
        that.tenantId = tenantId;
        that.userId = record.id;
        that.model = Object.assign({}, record);
        that.visible = true;
        that.form.resetFields();
        that.resetScreenSize();
        that.$nextTick(() => {
          that.form.setFieldsValue(pick(this.model, 'username', 'realname', 'sex', 'phone', 'telephone', 'email', 'birthday'))
        });

        // 查询关联企业列表
        this.queryParam.tenantId = tenantId;
        this.queryParam.userId = record.id;
        this.url.list = api.listUserTenant(this.tenantId, this.userId);
        this.loadData(1);
      },
      close () {
        this.visible = false;
      },
      handleCancel () {
        this.close();
        this.$emit('ok');
      },
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth;
        } else {
          this.drawerWidth = 700;
        }
      },
      handleConfirmBlur (e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value
      }
    }
  }
</script>

<style scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: -1px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
